<template>
  <div class="rolling-page">
    <div class="rolling-main">
      <div class="rolling-title" ref="rollingHeight">
        锦州特味烧烤
      </div>
      <ul class="rolling-nav flex-middle-x layout-flex-justify-content_space-between">
        <li
          v-for="(item,index) in navList"
          :class="index === activeNav?'activeNav':''"
          @click="actionClickNav(index)"
        >{{item.name}}</li>
      </ul>
      <div class="rolling-measuring" v-if="activeNav ===0">
        <ul class="title">
          <li
            v-for="(item,index) in titleList"
            :class="index === activeType?'active':''"
            @click="actionClickRolling(index)"
          >{{item.name}}</li>
        </ul>
        <div class="content-box" ref="contentBox">
          <ul class="content" ref="content">
            <li class="flex-middle-x"
                v-for="(item,index) in 42"
                @click="actionClickProduct(index)"
            >
              <img :src="testImg" alt="">
              <p>羊肉串</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="rolling-evaluation" v-if="activeNav ===1">
        暂无评价
      </div>
      <div class="rolling-merchants" v-if="activeNav ===2">
        暂无商家
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name:'',
    data(){
      return {
        title:'饿了吗，滚动',
        testImg:require('./test-img.jpg'),
        activeType:0,
        activeNav:0,
        rollingHeight:0,
        titleHeight:0
      }
    },
    computed:{
      titleList(){
        return [
          {name:'串类'},
          {name:'热菜锡纸类'},
          {name:'特色海鲜类'},
          {name:'拌菜'},
          {name:'主食类'},
          {name:'酒水'}
        ]
      },
      navList(){
        return [
          {name:'点餐'},
          {name:'评价'},
          {name:'商家'}
        ]
      }
    },
    watch:{
      showList:function(){

      }
    },
    methods:{
      actionClickProduct(index){
        window.alert('产品' + index);
      },
      actionClickRolling(index){
        this.activeType = index;
        if (index === 0){
          window.scrollTo(0, 0)
        } else {
          window.scrollTo(0, this.titleHeight)
        }
        this.$refs.contentBox.style.overflow = 'hidden';
        this.$refs.content.style.marginTop = -1.5 * index * 7 + 'rem';
      },
      actionClickNav(index){
        this.activeNav = index;
      },
      doSomeThing(){
        let bodys = document.getElementsByTagName('body');
        this.rollingHeight = this.$refs.rollingHeight.offsetHeight;
        window.onscroll = () => {
          console.log(this.$refs.contentBox.scrollTop)
          if (bodys[0].scrollTop >= this.rollingHeight) {
            this.$refs.contentBox.style.overflowY = 'auto';
          } else {
            this.$refs.contentBox.style.overflow = 'hidden';
          }
        }
      }
    },
    mounted:function(){
      this.doSomeThing();
      setTimeout(() => {
        this.titleHeight = this.$refs.rollingHeight.offsetHeight;
      }, 1000)
    }
  }
</script>
<style lang="scss" rel="stylesheet/scss" scoped="">
  .rolling-page{
    .rolling-main{
      height:100%;
      .rolling-title{
        width:100%;
        height:2.1rem;
        line-height: 2.1rem;
        font-size:1rem;
        color:$color-black;
        border-bottom:1px solid #ccc;
        text-align: center;
      }
      .rolling-nav{
        width:100%;
        height:1rem;
        padding:0 1rem;
        border-bottom:1px solid #ccc;
        font-size:0.3rem;
        color:$color-black;
        li{
          padding:0.2rem;
          border-bottom:1px solid transparent;
        }
        .activeNav{
          border-bottom:1px solid $color-icbcRed;
        }
      }
      .rolling-measuring{
        width:100%;
        height:11.15rem;
        .title{
          width:40%;
          height:5rem;
          float:left;
          display: inline-block;
          padding-left:0.2rem;
          .active{
            background:red;
          }
          li{
            margin-top:0.2rem;
          }
        }
        .content-box{
          width:55%;
          height:100%;
          float:right;
          display: inline-block;
          background:yellow;
          /*overflow: auto;*/
          .content{
            transition: all 1s;
            li{
              width:4rem;
              height:1rem;
              margin-top:0.5rem;
              border-bottom:1px solid #ccc;
              img{
                width:1rem;
              }
              p{
                font-size:0.3rem;
              }
            }
          }
        }
      }
      .rolling-evaluation, .rolling-merchants{
        padding-top:2rem;
        text-align: center;
        font-size:1rem;
        color:$color-black;
      }
    }
  }
</style>
